<template>
	<view class="container">
		<van-tabs :active="active">
			<van-tab title="商品详情">

				<block v-if="cardOrderInfo.length !== 0">
					<!-- 有商品 -->
					<view class="yesdetails" v-if="orderShow">
						<view class="yesdetails_title">
							<h1>商品名称</h1>
							<text>{{ cardOrderInfo.details[0].productName }}</text>
						</view>
						<view class="yesdetails_title">
							<h1>订单编号</h1>
							<text>{{ cardOrderInfo.orderNum }}</text>
						</view>
						<view class="yesdetails_title">
							<h1>支付方式</h1>
							<text v-if="cardOrderInfo.paymentType == 0">线下</text>
							<text v-if="cardOrderInfo.paymentType == 1">小程序</text>
							<text v-if="cardOrderInfo.paymentType == 2">公众号</text>
							<text v-if="cardOrderInfo.paymentType == 3">H5</text>
							<text v-if="cardOrderInfo.paymentType == 4">PC</text>
							<text v-if="cardOrderInfo.paymentType == 5">支付宝</text>
							<text v-if="cardOrderInfo.paymentType == 6">余额</text>
						</view>

						<view class="yesdetails_title">
							<h1>总计金额</h1>
							<text>¥{{ cardOrderInfo.payPrice }}</text>
						</view>

					</view>
					<!-- 有商品 -->
					<view class="yesdetails" v-if="cardShow">
						<view class="yesdetails_title">
							<h1>商品名称</h1>
							<text>{{ cardOrderInfo.name }}</text>
						</view>
						<view class="yesdetails_title">
							<h1>描述</h1>
							<text>{{ cardOrderInfo.remark }}</text>
						</view>
						<view class="yesdetails_title">
							<h1>购买时间</h1>
							<text>{{ cardOrderInfo.createTime }}</text>
						</view>
						<view class="yesdetails_title">
							<h1>剩余次数</h1>
							<text>¥{{ cardOrderInfo.residueNumber }}</text>
						</view>
					</view>
					<!-- 礼品卡核验 -->
					<view class="yesdetails" v-if="giftCardShow">
						<view class="yesdetails_title">
							<h1>金额</h1>
							<text>¥{{ cardOrderInfo.payPrice }}</text>
						</view>
						<view class="yesdetails_title">
							<h1>商品</h1>
							<text>{{ cardOrderInfo.body }}</text>
						</view>
						<view class="yesdetails_title">
							<h1>订单类型</h1>
							<text v-if="cardOrderInfo.orderType == 0">礼品卡</text>
							<text v-if="cardOrderInfo.orderType == 1">会员卡</text>
							<text v-if="cardOrderInfo.orderType == 2">充值</text>
							<text v-if="cardOrderInfo.orderType == 3">门票</text>
							<text v-if="cardOrderInfo.orderType == 4">百货</text>
							<text v-if="cardOrderInfo.orderType == 5">服务</text>
						</view>

						<view class="yesdetails_title">
							<h1>订单编号</h1>
							<text>{{ cardOrderInfo.orderNum }}</text>
						</view>
						<view class="yesdetails_title">
							<h1>支付方式</h1>
							<text v-if="cardOrderInfo.paymentType == 0">线下支付</text>
							<text v-if="cardOrderInfo.paymentType == 1">小程序支付</text>
							<text v-if="cardOrderInfo.paymentType == 2">公众号支付</text>
							<text v-if="cardOrderInfo.paymentType == 3">H5支付</text>
							<text v-if="cardOrderInfo.paymentType == 4">PC支付</text>
							<text v-if="cardOrderInfo.paymentType == 5">支付宝支付</text>
							<text v-if="cardOrderInfo.paymentType == 6">余额支付</text>
						</view>
						<view class="yesdetails_title">
							<h1>购买时间</h1>
							<text>{{ cardOrderInfo.createTime }}</text>
						</view>

					</view>

					<!-- 会员码核验 -->
					<view class="yesdetails" v-if="memberCodeShow">
						<view class="yesdetails_title">
							<h1>会员名称</h1>
							<text>{{ cardOrderInfo.name }}</text>
						</view>
						<view class="yesdetails_title">
							<h1>会员头像</h1>
							<image :src="cardOrderInfo.avatar" mode="aspectFill"></image>
						</view>
						<view class="yesdetails_title">
							<h1>会员电话</h1>
							<text>{{ cardOrderInfo.phone }}</text>
						</view>

						<view class="yesdetails_title">
							<h1>注册时间</h1>
							<text>{{ cardOrderInfo.createTime }}</text>
						</view>

					</view>
				</block>

				<!-- 没有商品 -->
				<view class="nodetails" style="height: 510px" v-else>
					<view class="nodetails_img">
						<image
							src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/3a7b53543eb8e61ccf6b16369db10a00.png"
							mode="widthFix" class="maxImage"></image>
					</view>
					<text>页面空空如也...</text>
				</view>

			</van-tab>
			<van-tab title="核销记录">

				<block v-if="recordLog.length !== 0">
					<view class="openrecord" v-if="recordShow">
						<view class="openrecord_box" v-for="(item,i) in recordLog" :key="i">
							<view class="openrecord_box_text">
								<h1>{{ item.commodityName }}</h1>
								<text>核销员:{{ item.checkUserName }}</text>
								<text>会员:{{ item.userName }}</text>
							</view>
							<view class="openrecord_box_title">
								-¥{{ item.amount }}
							</view>
						</view>
					</view>
				</block>

				<!-- 没有商品 -->
				<view class="nodetails" style="height: 510px" v-else>
					<view class="nodetails_img">
						<image
							src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210617/3a7b53543eb8e61ccf6b16369db10a00.png"
							mode="widthFix" class="maxImage"></image>
					</view>
					<text>还没有核销记录哦...</text>
				</view>

			</van-tab>
		</van-tabs>

		<view class="open">
			<button class="open_button open_button_box" @click="scanCode">
				扫码
			</button>
			<button class="open_button" @click="openCheck">
				确认核销
			</button>
		</view>


		<!-- <tui-popup :duration="500" :modeClass="mode" :styles="styles" :show="transShow">
			<view class="tui-text">
				<view>ThorUI文档地址：</view>
				<view>https://thorui.cn/doc</view>
			</view>
		</tui-popup> -->



		<van-popup round :show="checkShow" closeable custom-style="height: 35%;width: 60%" @close="openClose">
			<h1>核销次数</h1>

			<uni-number-box :min="0" v-model="usedCount"></uni-number-box>

			<view class="container_input">
				<textarea class="container_input_box" v-model="remarks" maxlength="50"
					placeholder-style="color:rgba(61, 61, 61, 0.5)" placeholder="请添加备注" @input="textareaInput" />
				<text class="container_input_abso">{{textareaList}}/50</text>
			</view>

			<button class="open_button" @click="openClick">
				确定
			</button>

		</van-popup>

	</view>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'

	import {
		orderCheck,
		activityCheck,
		orderDetail,
		checklog,
		vipDetailByUser,
		advanceOrderDetail
	} from "@/api/order";

	import {
		examineUserInfo
	} from "@/api/user";

	export default {
		data() {
			return {
				active: 0,
				memberCodeShow: false,
				giftCardShow: false,
				orderShow: false,
				recordShow: false,
				checkShow: false,
				cardShow: false,
				params: '',
				usedCount: 1,
				orderInfo: {},
				cardInfo: {},
				cardOrderInfo: [],
				recordLog: [],
				currentPage: 1,
				size: 30,
				remarks: '',
				textareaList: 0,

				show: false,
				transShow: false,
				mode: ['zoom-in'],
				styles: {
					position: 'fixed',
					bottom: 0,
					top: 0,
					left: 0,
					right: 0,
					/* #ifndef APP-NVUE */
					display: 'flex',
					/* #endif */
					'justify-content': 'center',
					'align-items': 'center'
				}
			};
		},
		computed: {
			...mapGetters('m_user', ['isLogin', 'currentStoreId'])
		},
		methods: {
			textareaInput(e) {
				this.textareaList = e.detail.cursor
				this.remarks = e.detail.value.trim()
			},
			//打开核销弹框
			openCheck() {
				if (this.params.type === 0) {
					this.memberCardOrderVerify();
				} else if (this.params.type === 1) {
					this.checkShow = true; //核验次数
				} else if (this.params.type === 4) {
					this.memberGiftCarda();
				}else if (this.params.type === 10) {
					this.memberCode();
				}
			},
			// 扫码核
			scanCode() {
				var self = this;
				wx.scanCode({
					scanType: ["qrCode", "barCode"],
					success(res) {
						console.log(JSON.parse(res.result))
						self.params = JSON.parse(res.result);
						self.params.type = parseInt(self.params.type);
						self.codeChange();
					},
					fail(res) {
						// console.log(res);
					},
				})
			},
			codeChange: function() {
				let self = this
				self.$util.Tips({
					title: '查询中'
				});
				// 10 会员码， 1 门票， 2 会员卡， 3 优惠卷  4 礼品卡  5 充值  6 百货  7 服务
				if (this.params.type === 0) {
					this.getMemberCardOrder(); //获取会员卡订单信息
				} else if (this.params.type === 1) {
					this.getMemberCard(); //获取会员卡二维码信息
				} else if (this.params.type === 2) {
					this.memberCardactivity() // 优惠劵
				} else if (this.params.type === 10) {
					this.getMemberInfo() // 会员码
				} else if (this.params.type === 4) {
					this.getGiftCardDetail() // 礼品卡
				}
			},
			/**
			 * 获取会员信息
			 */
			getMemberInfo() {
				var self = this;
				examineUserInfo(this.params.id).then(res => {
					self.cardOrderInfo = res.data;
					self.memberCodeShow = true;
				}).catch(res => {
					return self.$util.Tips({
						title: res
					});
				});
			},
			/**
			 * 获取礼品卡详情
			 */
			getGiftCardDetail() {
				var self = this;
				advanceOrderDetail(this.params.id)
					.then(res => {
						
						self.cardOrderInfo = res.data;
						self.giftCardShow = true;
					})
					.catch(res => {
						return self.$util.Tips({
							title: res
						});
					});
			},
			/**
			 * 获取会员卡订单
			 */
			getMemberCardOrder() {
				var self = this;
				orderDetail(this.params.orderId)
					.then(res => {
						console.log(res)
						self.cardOrderInfo = res.data;
						self.orderShow = true;
					})
					.catch(res => {
						return self.$util.Tips({
							title: res
						});
					});
			},
			/**
			 * 获取会员卡信息
			 */
			getMemberCard() {
				var self = this;

				vipDetailByUser(this.params.orderId)
					.then(res => {
						self.cardOrderInfo = {
							residueNumber: res.data.userVip.residueNumber,
							totalNumber: res.data.userVip.totalNumber,
							createTime: res.data.userVip.createTime,
							name: res.data.vipCard.name,
							remark: res.data.vipCard.remark
						}
						self.cardShow = true;
						self.getChecklog();
					})
					.catch(res => {
						return self.$util.Tips({
							title: res
						});
					});
			},
			getChecklog() {
				let self = this;
				checklog(self.params.userId, self.currentPage, self.size)
					.then(res => {
						self.recordShow = true;
						self.recordLog = res.data.records;

						// console.log("getChecklog");
						// console.log(self.recordLog);
						self.$util.Tips({
							title: res.msg
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			},
			/**
			 * 确定销码
			 */
			openClick() {
				if (this.params.type === 1) {
					this.memberCardUsedCountVerify();
				}
			},
			/**
			 * 取消
			 */
			openClose() {
				this.checkShow = false
			},
			//核销购买会员卡
			memberCardOrderVerify() {
				let self = this;
				orderCheck(this.cardOrderInfo.id, 1, this.currentStoreId, 1)
					.then(res => {
						self.cardOrderInfo = {}
						self.orderShow = false;

						self.$util.Tips({
							title: "核销成功"
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			},
			//核销会员码
			memberCode() {
				let self = this;
				orderCheck(self.params.id, 10, this.currentStoreId, 1).then(res => {
						self.$util.Tips({
							title: "核销成功"
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			},
			//核销购买礼品卡
			memberGiftCarda() {
				let self = this;
				orderCheck(self.params.id, 4, this.currentStoreId, 1).then(res => {
						self.$util.Tips({
							title: "核销成功"
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			},
			//核销优惠劵
			memberCardactivity() {
				let self = this;
				orderCheck(self.params.activityId, 3, this.currentStoreId, 1).then(res => {
						self.$util.Tips({
							title: "核销成功"
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			},
			//核销会员卡次数
			memberCardUsedCountVerify() {
				let self = this
				if (self.usedCount < 1) {
					self.$util.Tips({
						title: "使用次数必须大约等于1"
					});
					return;
				}
				orderCheck(self.params.orderId, 0, this.currentStoreId, this.usedCount)
					.then(res => {
						self.cardOrderInfo = {}
						self.checkShow = false;
						self.$util.Tips({
							title: res.msg
						});
					})
					.catch(res => {
						self.$util.Tips({
							title: res
						});
					});
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .van-tabs__line {
		background-color: #FDD338 !important;
		width: 30px !important;
		margin-left: 32px;
	}

	/deep/ .van-tabs__wrap {
		border-bottom: 1px solid #f1f1f1;
	}


	/deep/ .van-popup {
		padding-top: 45rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		h1 {
			font-size: 36rpx;
		}
	}

	.nodetails {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		padding-bottom: 128rpx;

		.nodetails_img {
			.maxImage {
				width: 184rpx;
				height: 322rpx;
			}
		}

		text {
			font-size: 36rpx;
			margin-top: 20rpx;
			color: rgba(61, 61, 61, 0.3);
		}
	}

	.yesdetails {
		padding: 50rpx 48rpx 0;

		.yesdetails_title {
			display: flex;
			align-items: center;
			margin-bottom: 40rpx;

			h1 {
				font-size: 30rpx;
				color: rgba(61, 61, 61, 0.3);
			}

			text {
				font-size: 30rpx;
				margin-left: 54rpx;
			}
			image {
				margin-left: 54rpx;
				width: 60rpx;
				height: 60rpx;
				border-radius: 100%;
			}
		}
	}

	.openrecord {

		box-sizing: border-box;
		padding: 37.5rpx 24rpx 0;

		.openrecord_box {
			width: 702rpx;
			height: 186rpx;
			background-color: rgba(247, 247, 247, 1);
			border-radius: 20rpx;
			padding: 38rpx 50rpx;
			box-sizing: border-box;
			display: flex;
			// flex-direction: column;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 28rpx;

			.openrecord_box_text {
				height: 108rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				h1 {
					font-size: 34rpx;
					color: rgba(61, 61, 61, 1);
					font-weight: bold;
				}

				text {
					color: rgba(61, 61, 61, 0.5);
					font-size: 28rpx;
				}
			}

			.openrecord_box_title {
				color: rgba(61, 61, 61, 1);
				font-size: 40rpx;
			}
		}
	}


	.open {
		position: fixed;
		bottom: 0;
		width: 100%;
		height: 128rpx;
		box-shadow: 0px 0px 15rpx rgba(0, 0, 0, 0.09);
		display: flex;
		justify-content: space-around;
		align-items: center;
		box-sizing: border-box;

		.open_button {
			width: 306rpx;
			height: 80rpx;
			background-color: rgba(253, 211, 56, 1);
			border-radius: 226rpx;
			font-size: 30rpx;
			line-height: 80rpx;
			text-align: center;
			color: rgba(61, 61, 61, 1);
			font-size: 16px;
			font-weight: 500;
		}

		.open_button_box {
			background-color: transparent;
			border: 1px solid rgba(61, 61, 61, 0.2);
			font-size: 16px;
			font-weight: 500;
		}

	}

	.open_button {
		width: 306rpx;
		height: 80rpx;
		background-color: rgba(253, 211, 56, 1);
		border-radius: 226rpx;
		font-size: 30rpx;
		line-height: 80rpx;
		font-weight: bold;
		text-align: center;
		color: rgba(61, 61, 61, 1);
		font-size: 16px;
		font-weight: 500;
	}

	.container_input {
		position: relative;
		height: 268rpx;
		background-color: rgba(247, 247, 247, 1);
		border-radius: 10rpx;
		margin-top: 20rpx;
		padding: 29rpx 36rpx;
		box-sizing: border-box;
		font-size: 26rpx;


		.container_input_box {
			height: 260rpx !important;
		}

		.container_input_abso {
			position: absolute;
			bottom: 30rpx;
			right: 50rpx;
			color: rgba(61, 61, 61, 0.5);
		}
	}

	.tui-text {
		width: 160px;
		height: 100px;
		display: flex;
		border: 2px solid #333;
		border-radius: 12px;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		color: #fff;
		background-color: #5677fc;
	}
</style>
